<template>
  <page-header-wrapper >
    <a-card :bordered="false">
      <div class="table-title">
        <h3>APP分类列表</h3>
        <span>注意：每个月保证有3种分类</span>
      </div>
      <a-table :dataSource="appointList" :columns="appointColumns" rowKey="id" :pagination="false" style="margin-bottom:32px">
        <template v-slot:img_url="text">
          <a-avatar :src="text" shape="square" :size="88"></a-avatar>
        </template>
        <template v-slot:month="text">
          <a-tag color="blue" v-for="item in text" :key="item">{{ item + '月' }}</a-tag>
        </template>
        <template v-slot:action="text,record">
          <a @click="handleEdit(record)">修改</a>
        </template>
      </a-table>
      <div class="table-title">
        <h3>月份列表</h3>
      </div>
      <a-table :dataSource="sloganList" :columns="sloganColumns" rowKey="id" :pagination="false" :loading="sloganLoading">
        <template
          slot="slogan"
          slot-scope="text, record"
        >
          <div>
            <a-input
              v-if="record.editable"
              style="margin: -5px 0"
              v-model="editingRecord.slogan"
            />
            <template v-else>
              {{ text }}
            </template>
          </div>
        </template>
        <template slot="action" slot-scope="text, record,index">
          <div class="editable-row-operations">
            <span v-if="record.editable">
              <a @click="() => save(record,index)">保存</a>
              <a @click="() => cancel(record)">取消</a>
            </span>
            <span v-else>
              <a :disabled="editingRecord" @click="() => edit(record,index)">修改</a>
            </span>
          </div>
        </template>
      </a-table>
    </a-card>
    <create-form
      ref="createModal"
      :visible="visible"
      :loading="confirmLoading"
      :model="mdl"
      title="家电"
      @cancel="visible = false"
      @ok="handleOk"
    />
  </page-header-wrapper>
</template>

<script>
import { appAppointList, appSloganEdit, appAppointEdit } from '@/api/app'
import CreateForm from './modules/appAppointForm'

const appointColumns = [
    {
        title: '名称',
        dataIndex: 'name'
    },
    {
        title: '图片',
        dataIndex: 'img_url',
        scopedSlots: { customRender: 'img_url' }
    },
    {
        title: '所展示月份',
        dataIndex: 'month',
        scopedSlots: { customRender: 'month' }
    },
    {
        title: '操作',
        dataIndex: 'action',
        width: '15%',
        scopedSlots: { customRender: 'action' }
    }
]

const sloganColumns = [
    {
        title: '月份',
        dataIndex: 'month',
        width: '15%'
    },
    {
        title: '标语',
        dataIndex: 'slogan',
        width: '70%',
        scopedSlots: { customRender: 'slogan' }
    },
     {
        title: '操作',
        dataIndex: 'action',
        width: '15%',
        scopedSlots: { customRender: 'action' }
    }
]

export default {
  name: 'AppIndex',
  components: {
    CreateForm
  },
    data () {
    this.appointColumns = appointColumns
    this.sloganColumns = sloganColumns
    return {
      appointList: [],
      sloganList: [],
      editingRecord: null,
      sloganLoading: false,
      appointLoading: false,
      visible: false,
      mdl: null,
      confirmLoading: false
    }
  },
  created () {
    this.getList()
  },
  methods: {
    handleEdit (record) {
      this.visible = true
      this.mdl = { ...record }
    },
    getList () {
      this.sloganLoading = true
      this.appointLoading = true
      appAppointList().then(res => {
        this.appointList = res.data.appoint.map(item => {
            item.month = JSON.parse(item.month)
            return item
        })
        this.sloganList = res.data.slogan.map(item => {
            item.editable = false
            return item
        })
        this.sloganLoading = false
        this.appointLoading = false
      })
    },
    edit (record) {
      this.editingRecord = { ...record }
      record.editable = true
      this.$set(record, 'editable', true)
    },
    save (record, index) {
      this.sloganLoading = true
      const params = {
            id: this.editingRecord.id,
            slogan: this.editingRecord.slogan
      }
      appSloganEdit(params).then(res => {
           this.$set(this.sloganList, index, this.editingRecord)
           this.editingRecord = null
           record.editable = false
           this.$message.success('操作成功')
      }).finally(() => (this.sloganLoading = false))
    },
    cancel (record) {
      record.editable = false
      this.editingRecord = null
    },
     handleOk () {
      const form = this.$refs.createModal.form
      this.confirmLoading = true
      form.validateFields((errors, values) => {
        if (!errors) {
          console.log('values', values)
            appAppointEdit(values).then(res => {
              this.visible = false
              form.resetFields()
              this.$refs.table.refresh()
              this.$message.success('操作成功')
            }).finally(() => (this.confirmLoading = false))
        } else {
          this.confirmLoading = false
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.table-title{
    display: flex;
    align-items: center;
    margin-bottom: 26px;
    h3{
        margin-right: 30px;
        margin-bottom: 0;
    }
}
.editable-row-operations a {
  margin-right: 8px;
}
</style>
